﻿#footer {
    /*overflow: hidden;*/
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% * (1 - 1 / 1.4));
    margin: 0 auto;
}

    #footer .footer-page {
        display: flex;
        overflow: hidden;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translate3D(-120%,0,0);
        transition: transform 0.3s;
    }

        #footer .footer-page.visible {
            transform: translate3D(0,0,0);
        }

        #footer .footer-page .btn-back {
            display: flex;
            flex-basis: 0;
            flex-grow: 1;
            flex-flow: column nowrap;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            border: none;
        }

            #footer .footer-page .btn-back > i {
                height: 90%;
                width: 90%;
            }

        #footer .footer-page .content {
            flex-basis: 0;
            flex-grow: 4;
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;
            justify-content: space-around;
            height: 100%;
        }

        #footer .footer-page .btn-menu {
            height: 30%;
        }

            #footer .footer-page .btn-menu [class^="icon-"] {
                position: absolute;
                visibility: visible;
                left: 2%;
                top: 23%;
            }

    #footer #menu-play-keyboard {
        flex-flow: row wrap;
    }

        #footer #menu-play-keyboard .side {
            /*background: #eee;*/
            flex-basis: 0;
            flex-grow: 1;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            height: 100%;
        }

            #footer #menu-play-keyboard .side.left {
                align-items: flex-start;
            }

            #footer #menu-play-keyboard .side.right {
                align-items: flex-end;
            }

        #footer #menu-play-keyboard .middle {
            /*background: #aaa;*/
            flex-basis: 0;
            flex-grow: 3;
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-around;
            height: 100%;
        }

        #footer #menu-play-keyboard .side .btn {
            width: 96%;
            height: 30%;
        }

        #footer #menu-play-keyboard .middle .btn {
            width: 32%;
            height: 30%;
        }

        #footer #menu-play-keyboard .btn.pencil .icon-pencil {
            font-size: 1.5em;
        }

        #footer #menu-play-keyboard .btn.clock .time {
            display: none;
        }

        #footer #menu-play-keyboard .btn.clock.show-time .time {
            display: block;
        }

        #footer #menu-play-keyboard .btn.clock.show-time .icon-clock {
            display: none;
        }

    #footer .footer-page .question {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
    }

        #footer .footer-page .question .label {
            height: 50%;
            font-size: 1.5em;
            text-align: center;
        }

        #footer .footer-page .question .actions {
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }

            #footer .footer-page .question .actions .btn-menu {
                width: 45%;
                height: 100%;
            }

    #footer .footer-page .content.with-text {
    }

        #footer .footer-page .content.with-text > .title {
        }

        #footer .footer-page .content.with-text > .sub-title {
            font-size: 0.6em;
        }

        #footer .footer-page .content.with-text .actions {
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }

            #footer .footer-page .content.with-text .actions .btn-menu {
                width: 45%;
                height: 100%;
            }
